<template>
  <div id="container">
    <a-row style="height: 50%">
      <a-col :span="12" class="col1"
        ><div class="sa">
          {{ neuron_online_total }} / {{ neuron_total }}
        </div></a-col
      >
      <a-col :span="12" class="col1"
        ><div class="sa">{{ node_online_total }} / {{ node_total }}</div></a-col
      >
    </a-row>
    <a-row style="height: 50%">
      <a-col :span="12" class="col1"
        ><div class="sa">{{ group_total }}</div></a-col
      >
      <a-col :span="12" class="col1"
        ><div class="sa">{{ tag_total }}</div></a-col
      >
    </a-row>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { getStatus } from "../../utils/neuronApi";

let timer = undefined;

const neuron_online_total = ref(0);
const neuron_total = ref(0);
const node_online_total = ref(0);
const node_total = ref(0);
const group_total = ref(0);
const tag_total = ref(0);

onMounted(async () => {
  setTimeout(async () => {
    await getStat();
    timer = setInterval(async () => {
      await getStat();
    }, 1000 * 60);
  }, 100);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

const getStat = async () => {
  let status = await getStatus();
  neuron_online_total.value = status.neuron_online_total;
  neuron_total.value = status.neuron_total;
  node_online_total.value = status.node_online_total;
  node_total.value = status.node_total;
  group_total.value = status.group_total;
  tag_total.value = status.tag_total;
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top right, #c6e6e8, #baccd9, #f2e7e5);
}
.col1 {
  /* border: 1px solid red; */
  height: 100%;
}
.sa {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
